<template>
  <div class="read-home-container" ref="list" @scroll="alive">
    <!-- 在组件上添加点击事件，需要使用native穿透,穿透到底层的元素上，就可以使用了 -->

    <header-search @click.native="onHeaderClick"></header-search>
    {{ bookList.length }}
    <!--  -->
    <div class="read-home-list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <template v-for="(item, i) in bookList">
          <BookCard :key="i" :item="item"></BookCard>
        </template>
      </van-list>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState, mapGetters } from 'vuex'
import HeaderSearch from '../components/HeaderSearch.vue'
import BookCard from '../components/BookCard.vue'
export default {
  name: 'readHome',
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      scrollPages: '',
      // 分页配置
      opt: {
        page: 0,
        size: 10,
      },
    }
  },
  components: {
    HeaderSearch,
    BookCard,
  },
  created() {},
  activated() {
    this.SET_INIT_COMPARE_BOOKLIST()
    this.$refs.list.scrollTop = this.scrollPages
  },
  computed: {
    ...mapState(['bookList']),
  },
  methods: {
    ...mapMutations(['SET_INIT_COMPARE_BOOKLIST']),
    ...mapActions(['FetchBookList']),
    // 上拉加载，第一次请求数据，放在这个地方，去掉creaed生命周期
    // 因为onLoad进入页面就会触发一次，所以，我们可以去掉created生命周期的第一次就可以了，把onload作为第一次
    onLoad() {
      this.opt.page++
      // 请求数据
      this.FetchBookList(this.opt).then((res) => {
        // 数据过来之后，关闭loading
        this.loading = false
        // 做了一个数据比较(针对书架数据)
        this.SET_INIT_COMPARE_BOOKLIST()
        // 判断数据是否到底
        if (this.bookList.length >= 50) {
          // 数据都请求过来之后，结束刷新（数据边界优化）
          this.finished = true
        }
      })
    },
    alive(e) {
      this.scrollPages = e.target.scrollTop
    },
    onHeaderClick() {
      this.$router.push('/search')
    },
  },
}
</script>

<style lang="scss">
.read-home-container {
  height: 100%;
  overflow: auto;
}
.read-home-list {
  padding: 10px;
}
</style>
